<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 200px;width: 200px }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"   src="jquery/jquery-1.4.4.js"></script>


<script type="text/javascript">
var map;
var geocoder;
var arrayDeptMarkers=[];
var arrayArrMarkers=[];

$(function(){
	/*init geocoding service*/
	geocoder = new google.maps.Geocoder();

	/*Init gmap*/
    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    /*bind btn evt for coding address*/
    $("#ity input[type=button]").bind("click", function(event) {
            processAddress(event);} );

});


/*search address, display marks on map*/
function processAddress(firedEvent){
    var btName= $(firedEvent.target).attr("name");
    var addrType="";
    if (btName.indexOf("dept", 0)!=-1 ){
            addrType="dept";
    }else if(btName.indexOf("arr", 0)!=-1){
            addrType="arr";
    }

    var addressInput= $('input[type="text"][name$="'+btName.concat(":val")+'"]');
    
    var gcods= codeAddress($(addressInput).val());
    var divShow;
    if(addrType=='dept'){
        arrayDeptMarkers=[];
        /*select div for showing links*/
        divShow= $('#ity_dept_show');
    }else{
         arrayArrMarkers=[];
         divShow= $('#ity_arr_show');
    }
    var ul= $('<ul></ul>');
    for(i=0;i<gcods.length;i++){
      /*salvo i markers per poterli togliere dalla mappa successivamnte*/
      
        var marker = new google.maps.Marker({
            map: map,
            position:gcods[i].geometry.location
            });

        if(addrType=='dept' ){
            arrayDeptMarkers.push(marker);
        }else{
            arrayArrMarkers.push(marker);
        }
      
        
	/*per ogni localizzazione*/
        var link= $('<a></a>',{href:'#'}).append(gcods[i].address_components.long_name).data('data-location', gcods[i].geometry.location);

        link.bind('click', function(event){
                alert($(event.target).attr('href'));
                var location= $(event.target).data('data-location');
                var containerId= $(event.target).parent('div').get(0).attr('id');
                var arrayMark=[]
                if(containerId=='ity_dept_show'){
                   arrayMark=  arrayDeptMarkers;
                }else if(containerId=='ity_arr_show'){
                   arrayMark=  arrayArrMarkers;
                }
                for (i in arrayMark) {
                    if(arrayMark[i].location.lat()==location.lat() && arrayMark[i].location.lng()==location.lng()){
                        arrayMark[i].setMap(map);
                    }else{
                       markersArray[i].setMap(null);
                    }
                }

        })
	
        var li= $('<li></li>').append(link);
        $( ul).append(li);
    }
    $(divShow).replaceWith(ul);
}



/*GMAP REQUEST GEOCODING ADDRESS*/
/*function codeAddress(address){

    if(address!=null && address.size!=0){
        var res=[];
        /*geocoding request*/
  /*      geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                       res=results;
                        //set default center
                        map.setCenter(results[0].geometry.location);

                /*bad status*/
     /*           }else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
        });
    }
    return res ;
}*/

function codeAddress(address) {

    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }




</script>
</head>
<body>
<div id="ity" style="float:left;">
    <div>
            <span>departure</span><input title="departure" name="ity:dept:val" type="text" value="">
            <input name="ity:dept" type="button" value="search" >
    </div>
    <div id="ity:dept:show" style="border: 1px solid green;">addresses</div>
    <div>
            <span>arrival</span><input title="arrival" name="ity:arr:val" type="text" value="">
            <input  name="ity:arr" type="button" value="search" >
    </div>
    <div id="ity:arr:show" style="width:400px; border: 1px solid rosybrown;">addresses</div>
</div>

<div id="map_canvas" style="width:400px; height:400px; float:left;"></div>

</body>
</html>
